<template>
    <div class="contentWraper">
      <top-banner :tabBanner="bannerList"></top-banner>
      <i class="icon-play" @click="getShopFind"></i>
      <div class="extension1">
         <ul>
          <li v-for="item in extension" :key="item.data"> 
            <img :src="item.pic" alt="">
          </li>
        </ul>  
      </div>
      <div class="extension2">
        <img src="../../assets/images/discount/extension2.png" alt="">
      </div>
      <div class="samll">
        <img src="../../assets/images/discount/small.png" alt="">
        <div class="line"></div>
        <span v-for="item in bulletin" :key="item.id">{{item.title}}</span>
      </div>
      <div class="swiper">
        <swiper :options="swiperOption"  ref="mySwiper" class="swiper-box">  
            <swiper-slide v-for="item in advert1" :key="item.id" class="swiper-item"> 
                <img :src="item.pic">
            </swiper-slide>
        </swiper> 
      </div>
      <div class="contentjd">
        <div class="top">
          <span>京东优选</span>
          <span>JD</span>
          <span @click="shopFindjd">更多<i class="icon-back iconmore"></i></span>
        </div>
        <ul>
          <li v-for="item in extensionJd" :key="item.dataType" @click="searchList(item)">
            <span class="titles">{{item.title}}</span>
            <span class="text">{{item.text}}</span>
            <div class="pic">
                <img :src="item.pic" alt="">
            </div>
          </li>
        </ul>
      </div>
      <div class="brands">
        <div class="top">
          <span>品牌好货</span>
          <span>BRAND</span>
          <span>更多<i class="icon-back iconmore"></i></span>
        </div>
        <ul>
          <li v-for="item in brandlist" :key="item.brandId">
           <div class="logo">
             <img :src="item.logoPath" alt="">
           </div>
            <div class="pic">
              <img :src="item.picPath" alt="">
            </div>
            <span>{{item.brandName}}</span>
          </li>
        </ul>
      </div>
      <div class="favorite">
        <div class="top">
          <div class="leftline">
            <img src="../../assets/images/discount/favorite.png" alt="">
          </div>
          <div class="centercon"><p>猜你喜欢</p></div>
          <div class="rightline">
            <img src="../../assets/images/discount/favorite.png" alt="">
          </div>
        </div>
        <ul>
          <li v-for="item in hotlist" :key="item.skuId">
            <div class="pic">
              <!-- <img :src="item.thumbnailPath" alt=""> -->
            </div>
            <p class="title" v-text="item.skuName"></p>
            <p class="price">
              <span>¥{{item.uPrice}}</span>
              <span>¥{{item.lPrice}}</span>
            </p>
          </li>
        </ul>
      </div>
     <tab></tab>
  </div>
 
   <!-- <router-view></router-view> -->

</template>

<script>
import TopBanner from "@/base/topBanner/topBanner";
import Tab from "@/base/tab/tab";
export default {
  data() {
    return {
      data: {},
      bannerList: [],
      extension: [],
      advert1: [],
      bulletin: [],
      extensionJd: [],
      brandlist: [],
      hotlist: [],
      swiperOption: {
        autoplay: 3500,
        loop: true
      }
    };
  },
  created() {
    this.getContents();
  },
  methods: {
    searchList(item) {
      let id;
      let mdseName;
      if (item.dataType == 3) {
        id = "";
        mdseName = item.data;
      } else if (item.dataType == 1) {
        id = item.data;
        mdseName = "";
      }
      this.$router.push({
        name: "goodsList",
        query: { id: id, mdseName: mdseName, shopName: "jd_mall" }
      });
    },
    getContents() {
      this.$axios
        .get(process.env.baseUrl + "/web-avicare-1.0/weixin/mall/home")
        .then(res => {
          this.data = res.data.data;
          this.bannerList = this.data.banner;
          this.extension = this.data.extension;
          this.advert1 = this.data.advert1;
          this.bulletin = this.data.bulletin;
          this.extensionJd = this.data.extensionJd;
          this.brandlist = this.data.brand.list;
          this.hotlist = this.data.hot.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getShopFind() {
      this.$router.push({
        name: "shopFind"
      });
    },
    shopFindjd() {
      this.$router.push({
        name: "shopFindJD"
      });
    }
  },
  components: {
    TopBanner,
    Tab
  }
};
</script>

<style lang="less" scoped>
.contentWraper {
  overflow: hidden;
  margin-bottom: 1rem;
  i {
    display: block;
    font-size: 0.4rem;
    position: fixed;
    z-index: 10;
    top: 0.2rem;
    left: 0.2rem;
  }
  .extension1 {
    background: url(../../assets/images/discount/extension1.png);
    background-size: cover;
    overflow: hidden;
    ul {
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      li {
        float: left;
        list-style: none;
        width: 1.5rem;
        height: 1.3rem;
        margin-top: 0.2rem;
        margin-bottom: 0.05rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .extension2 {
    height: 2.16rem;
    width: 100%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .samll {
    position: relative;
    width: 7.3rem;
    border-radius: 0.7rem;
    margin: 0.1rem 0.1rem 0.2rem 0.1rem;
    height: 0.7rem;
    padding: 0.1rem 0.5rem;
    padding-left: 1rem;
    box-sizing: border-box;
    background-color: #fff;
    img {
      position: absolute;
      float: left;
      width: 0.55rem;
      height: 0.5rem;
      left: 0.24rem;
      top: 0.1rem;
    }
    .line {
      width: 1px;
      height: 0.26rem;
      margin-top: 0.1rem;
      background: #d7d7d9;
      float: left;
    }
    span {
      display: block;
      width: 100%;
      line-height: 0.5rem;
      height: 0.5rem;
      font-size: 0.26rem;
      color: #000;
      font-weight: bold;
      margin-left: 0.3rem;
    }
  }
  .swiper {
    width: 7.5rem;
    height: 1.5rem;
    .swiper-box {
      width: 100%;
      height: 100%;
      .swiper-item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .contentjd {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    overflow: hidden;
    .top {
      width: 100%;
      text-align: center;
      height: 0.48rem;
      margin: 0.1rem 0;
      span {
        font-size: 0.34rem;
        font-weight: 700;
        line-height: 0.47rem;
        float: left;
        text-align: center;
        color: #232323;
        &:first-child {
          margin-left: 2.5rem;
          margin-right: 0.1rem;
        }
        &:nth-child(2) {
          color: red;
        }
        &:last-child {
          position: relative;
          margin-left: 1.6rem;
          color: #afafaf;
          font-size: 0.26rem;
          padding-right: 0.5rem;
        }
        .iconmore {
          position: absolute;
          float: right;
          left: 0.6rem;
          top: 0.06rem;
          font-size: 0.26rem;
          border: 2px solid #ccc;
          border-radius: 100%;
          transform: rotate(180deg);
        }
      }
    }
    ul {
      width: 100%;
      overflow: hidden;
      margin-top: 0.2rem;
      li {
        position: relative;
        width: 3.5rem;
        float: left;
        padding: 0.15rem;
        box-sizing: border-box;
        list-style: none;
        background: #fff;
        margin-top: 0.1rem;
        .titles {
          position: absolute;
          font-size: 0.3rem;
          color: #e30030;
          top: 0.3rem;
          left: 0.3rem;
          font-weight: bold;
        }
        .text {
          position: absolute;
          font-size: 0.3rem;
          color: #232323;
          top: 0.8rem;
          left: 0.3rem;
          font-weight: bold;
        }
        .pic {
          float: right;
          width: 1.4rem;
          height: 1.4rem;
          img {
            width: 1.4rem;
            height: 1.4rem;
          }
        }
        &:nth-child(even) {
          margin-left: 0.1rem;
        }
      }
    }
  }
  .brands {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    overflow: hidden;
    .top {
      width: 100%;
      text-align: center;
      height: 0.48rem;
      margin: 0.1rem 0;
      span {
        font-size: 0.34rem;
        font-weight: 700;
        line-height: 0.47rem;
        float: left;
        text-align: center;
        color: #232323;
        &:first-child {
          margin-left: 2rem;
          margin-right: 0.1rem;
        }
        &:nth-child(2) {
          color: red;
        }
        &:last-child {
          position: relative;
          margin-left: 1.3rem;
          color: #afafaf;
          font-size: 0.26rem;
          padding-right: 0.5rem;
        }
        .iconmore {
          position: absolute;
          float: right;
          left: 0.6rem;
          top: 0.06rem;
          font-size: 0.26rem;
          border: 2px solid #ccc;
          border-radius: 100%;
          transform: rotate(180deg);
        }
      }
    }
    ul {
      width: 100%;
      height: 3rem;
      overflow: hidden;
      margin-top: 0.2rem;
      background: #fff;
      li {
        position: relative;
        float: left;
        width: 25%;
        height: 100%;
        list-style: none;
        .logo {
          position: absolute;
          width: 0.8rem;
          height: 0.23rem;
          top: 0.35rem;
          left: 0.5rem;
          img {
            position: absolute;
            width: 0.8rem;
            height: 0.23rem;
          }
        }
        .pic {
          position: absolute;
          width: 1.4rem;
          height: 1.4rem;
          top: 0.7rem;
          left: 0.2rem;
          img {
            position: absolute;
            width: 1.4rem;
            height: 1.4rem;
          }
        }
        span {
          position: absolute;
          display: block;
          width: 100%;
          text-align: center;
          margin-top: 0.3rem;
          font-size: 0.26rem;
          color: #232323;
          font-weight: 700;
          line-height: 0.37rem;
          bottom: 0.3rem;
        }
      }
    }
  }
  .favorite {
    width: 100%;
    .top {
      display: flex;
      margin: 0.3rem 0.2rem;
      box-sizing: border-box;
      .centercon {
        color: #232323;
        font-size: 0.28rem;
        font-weight: 700;
        width: 1.2rem;
        display: block;
        float: left;
        line-height: 0.3rem;
        text-align: center;
      }
      .leftline,
      .rightline {
        position: relative;
        flex: 1;
        content: "";
        width: 0;
        height: 0;
        margin-top: 0.15rem;
        border-bottom: 1px solid #ccc;
      }
      .leftline {
        margin-right: 0.6rem;
        img {
          position: absolute;
          width: 0.4rem;
          height: 0.28rem;
          top: -0.14rem;
          right: -0.5rem;
        }
      }
      .rightline {
        margin-left: 0.6rem;
        img {
          position: absolute;
          width: 0.4rem;
          height: 0.28rem;
          left: -0.5rem;
          top: -0.14rem;
        }
      }
    }
    ul {
      width: 100%;
      li {
        width: 3.7rem;
        float: left;
        list-style: none;
        background: #fff;
        margin-bottom: 0.1rem;
        &:nth-child(odd) {
          margin-right: 0.1rem;
        }
        .pic {
          width: 3rem;
          height: 3rem;
          margin: 0.35rem;
          box-sizing: border-box;
          background: pink;
          img {
            width: 3rem;
            height: 3rem;
          }
        }
        .title {
          height: 0.92rem;
          font-size: 0.28rem;
          line-height: 0.42rem;
          color: #232323;
          margin: 0.2rem 0.2rem;
          border-top: 1px dashed #ccc;
          padding-top: 0.1rem;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          text-align: left;
          margin: 0.2rem;
          font-weight: bold;
          height: 0.42rem;
          span {
            float: left;
            &:first-child {
              font-size: 0.38rem;
              color: #000;
            }
            &:last-child {
              font-size: 0.24rem;
              color: #b0b0b0;
              margin-left: 0.1rem;
              margin-top: 0.09rem;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>
